<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>车辆详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=vehicle-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <link rel="stylesheet" href="/style/jquery.contextMenu.min.css">
    <link rel="stylesheet" href="/style/jquery.jsonview.min.css">
</head>

<body>

    <div class="layui-fluid" id="LAY-app-message">
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基础信息</li>
                    <li>出车记录</li>
                    <li>加油记录</li>
                    <li>维修记录</li>
                    <li>相关文件</li>
                </ul>
                <div class="layui-tab-content">
                    <!--基础信息-->
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" action="#" lay-filter="vehicle-form">
                            <div class="LAY-app-message-btns" style="margin-bottom:20px;">
                                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="vehicle-apply">
                                    应用
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-primary" lay-submit
                                    lay-filter="vehicle-info-refresh">刷新
                                </button>
                            </div>
                            <input type="hidden" name="id">
                            <div class="layui-row">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*车牌号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="name" class="layui-input" lay-verify="required">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">车辆类型</label>
                                        <div class="layui-input-block">
                                            <select id="type" name="type" lay-search>
                                                <option value="">请选择车辆类型</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">品牌</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="brand" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">产权单位</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="owner" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">注册日期</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="regDate" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">加油卡号</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="fuelCard" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">卡内余额</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="balance" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">行驶总里程</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="mileage" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="note" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">*状态</label>
                                        <div class="layui-input-block">
                                            <select id="state" name="state">
                                                <option value="">请选择状态</option>
                                                <option value="1">在库</option>
                                                <option value="2">外出</option>
                                                <option value="3">维修</option>
                                                <option value="4">报废</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--车辆出车-->
                    <div class="layui-tab-item">
                        <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                            <button id="vehicle-use-refresh-btn" class="layui-btn layui-btn-primary layui-btn-sm">刷新
                            </button>
                        </div>
                        <table id="vehicle-use-table" lay-filter="vehicle-use-table"></table>
                        <script type="text/html" id="vehicle-use-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="replace">更换记录</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                    <!--车辆加油-->
                    <div class="layui-tab-item">
                        <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                            <button id="vehicle-refuel-refresh-btn" class="layui-btn layui-btn-primary layui-btn-sm">刷新
                            </button>
                        </div>
                        <table id="vehicle-refuel-table" lay-filter="vehicle-refuel-table"></table>
                        <script type="text/html" id="vehicle-refuel-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                    <!--车辆维修-->
                    <div class="layui-tab-item">
                        <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                            <button id="vehicle-repair-refresh-btn" class="layui-btn layui-btn-primary layui-btn-sm">刷新
                            </button>
                        </div>
                        <table id="vehicle-repair-table" lay-filter="vehicle-repair-table"></table>
                        <script type="text/html" id="vehicle-repair-toolbar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                    <!--相关文件-->
                    <div class="layui-tab-item">
                        <div class="LAY-app-message-btns" style="margin-bottom: 18px;">
                            <button id="vehicle-file-add-btn" class="layui-btn layui-btn-sm">添加</button>
                            <button id="vehicle-file-refresh-btn"
                                class="layui-btn layui-btn-primary layui-btn-sm">刷新</button>
                        </div>
                        <table id="vehicle-file-table" lay-filter="vehicle-file-table"></table>
                        <script type="text/html" id="vehicle-file-toolbar">
                    <a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/clipboard.min.js"></script>
    <script src="/js/common.js"></script>
    <script>

        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laytpl', 'upload'], function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var admin = layui.admin;
            var vehicleId = getParam("id");
            var vehicle;
            var popupIndex;
            var upload = layui.upload;

            upload.render({
                elem: '#vehicle-file-add-btn',
                url: '/vehicle-files/upload/' + vehicleId,
                accept: 'file',
                done: function (result) {
                    if (result.code == 200) {
                        layer.msg('上传成功');
                        table.reload('vehicle-file-table');
                    } else {
                        layer.msg('上传失败：' + result.msg);
                    }
                },
                error: function () {
                    layer.msg('上传失败');
                }
            });

            loadVehicleInfo();

            /**
             * 加载车辆信息
             */
            function loadVehicleInfo() {
                $.ajax({
                    url: "vehicles/" + vehicleId,
                    success: function (result) {
                        if (result.code == 0 && result.data) {
                            var data = result.data;
                            vehicle = data;
                            loadTypes(function (res) {
                                $('#type').empty();
                                $('#type').append('<option value="">选择车辆类型</option>');
                                res.forEach(function (item) {
                                    $('#type').append('<option value="' + item.value + '">' + item.value + '</option>');
                                });
                                form.val('vehicle-form', data);
                                form.render();
                            });
                            form.render();
                        } else {
                            layer.msg('平台无此车辆');
                        }
                    }
                });
            }

            loadTypes(function (result) {
                for (var i in result) {
                    var item = result[i];
                    $('#search-type').append('<option value="' + item.key + '">' + item.value + '</option>');
                }
                form.render();
            });

            function loadTypes(callback) {
                $.get('/dicts/items/vehicle-type', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadVehicles(vehicleId, callback) {
                $.get('/vehicles', { vehicleId }, function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function loadStations(callback) {
                $.get('/iot-stations', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            function showVehicleUseForm(data) {
                popupIndex = admin.popupRight({
                    area: '360px',
                    success: function () {
                        var formHtml = $('#vehicle-use-form').html();
                        $('#' + this.id).html(formHtml);
                        form.render();
                        if (data) {
                            form.val('vehicle-use-form', data);
                        }
                    }
                });
            }

            function showVehicleRelationForm(data) {
                popupIndex = admin.popupRight({
                    area: '360px',
                    success: function () {
                        var formHtml = $('#vehicle-refuel-form').html();
                        $('#' + this.id).html(formHtml);
                        loadVehicles(vehicle.vehicleId, function (res) {
                            res.forEach(function (item) {
                                $('#vehicle-refuel-id').append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                            form.render();
                        });
                    }
                });
            }

            function showIotVehicleForm(data) {
                popupIndex = admin.popupRight({
                    area: '360px',
                    success: function () {
                        var formHtml = $('#vehicle-repair-form').html();
                        $('#' + this.id).html(formHtml);
                        loadStations(function (res) {
                            res.data.forEach(function (item) {
                                $('#station').append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                            form.render();
                            form.on("select(station)", function (data) {
                                var stationId = data.value;
                                loadRemoteIoTVehicles(stationId, function (res) {
                                    res.data.forEach(function (item) {
                                        $('#remote-vehicle-repair').append('<option value="' + item.code + '">' + item.name + '</option>');
                                    });
                                    form.render();
                                    form.on("select(remote-vehicle-repair)", function (data) {
                                        var code = data.value;
                                        var name = $('#remote-vehicle-repair option:selected').text();
                                        $('#iot-code').val(code);
                                        $('#iot-name').val(name);
                                    });
                                });
                            });
                            if (data) {
                                form.val('vehicle-repair-form', data);
                            }
                        });
                        form.render();

                    }
                });
                return popupIndex;
            }

            function closePopupForm() {
                if (popupIndex) {
                    layer.close(popupIndex);
                }
            }

            /*表格加载区*/

            table.render({
                elem: '#vehicle-file-table',
                url: '/vehicle-files',
                title: '相关文件',
                skin: 'line',
                cols: [[
                    { field: 'name', title: '文件名' },
                    { field: 'createTime', title: '上传时间' },
                    { fixed: 'right', title: '操作', toolbar: '#vehicle-file-toolbar' }
                ]],
                where: {
                    vehicleId: vehicleId
                },
                page: true
            });

            table.render({
                elem: '#vehicle-refuel-table',
                url: 'vehicle-refuels',
                title: '加油纪录',
                skin: 'line',
                cols:
                    [
                        [
                            { field: 'vehicleName', title: '车牌号' },
                            { field: 'driverName', title: '驾驶员' },
                            { field: 'createTime', title: '加油时间' },
                            { field: 'mileage', title: '加油里程(公里)' },
                            { field: 'lastBalance', title: '上次余额' },
                            { field: 'expense', title: '本次金额' },
                            { field: 'lastBalance', title: '本次余额' },
                            { field: 'stateText', title: '状态' },
                        ]
                    ],
                where: {
                    vehicleId: vehicleId
                },
                page: true
            });

            table.render({
                elem: '#vehicle-repair-table',
                url: 'vehicle-repairs',
                title: '维修纪录',
                skin: 'line',
                cols:
                    [
                        [
                            { field: 'vehicleName', title: '车牌号' },
                            { field: 'driverName', title: '驾驶员' },
                            { field: 'sendTime', title: '送修时间' },
                            { field: 'location', title: '维修地点' },
                            { field: 'content', title: '维修内容' },
                            { field: 'retrieveTime', title: '取回时间' },
                            { field: 'mileage', title: '结束里程(公里)' },
                            { field: 'stateText', title: '状态' },
                        ]
                    ],
                where: {
                    vehicleId: vehicleId
                },
                page: true
            });

            table.render({
                elem: '#vehicle-use-table',
                url: 'vehicle-uses',
                title: '出车纪录',
                skin: 'line',
                cols:
                    [
                        [
                            { field: 'vehicleName', title: '车牌号' },
                            { field: 'driverName', title: '驾驶员' },
                            { field: 'startTime', title: '出车时间' },
                            { field: 'endTime', title: '还车时间' },
                            { field: 'useTimeText', title: '行驶时长' },
                            { field: 'driveMile', title: '行驶里程（公里）' },
                            { field: 'stateText', title: '状态' },
                        ]
                    ],
                where: {
                    vehicleId: vehicleId
                },
                page: true
            });

            table.on('tool(vehicle-use-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该数据吗？', function (index) {
                        $.ajax({
                            url: "vehicle-vehicle-uses/" + data.id,
                            method: "DELETE",
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('vehicle-use-table');
                                } else {
                                    layer.alert(result.msg, {
                                        skin: 'layui-layer-molv'
                                    });
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    showVehicleUseForm(data);
                }
            });

            table.on('tool(vehicle-refuel-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该数据吗？', function (index) {
                        $.ajax({
                            url: "vehicle-refuels/" + data.id,
                            method: "DELETE",
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('vehicle-refuel-table');
                                } else {
                                    layer.alert(result.msg, {
                                        skin: 'layui-layer-molv'
                                    });
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    showVehicleRelationForm(data);
                }
            });

            table.on('tool(vehicle-repair-table)', function (obj) {
                if (checkGuest()) {
                    return false;
                }
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该数据吗？', function (index) {
                        $.ajax({
                            url: "vehicle-repairs/" + data.id,
                            method: "DELETE",
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('vehicle-repair-table');
                                } else {
                                    layer.alert(result.msg, {
                                        skin: 'layui-layer-molv'
                                    });
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {

                } else if (obj.event === 'detail') {

                }
            });

            form.on('submit(vehicle-use-form-submit)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                data.field.vehicleId = vehicleId;
                $.ajax({
                    url: 'vehicle-uses',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('vehicle-use-table');
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                closePopupForm();
                return false;
            });

            form.on('submit(vehicle-refuel-form-submit)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                data.field.vehicleId = vehicleId;
                $.ajax({
                    url: 'vehicle-refuels',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('vehicle-refuel-table');
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                closePopupForm();
                return false;
            });

            form.on('submit(vehicle-repair-form-submit)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                data.field.vehicleId = vehicleId;
                $.ajax({
                    url: 'vehicle-repairs',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('vehicle-repair-table');
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                closePopupForm();
                return false;
            });

            /*工具栏区*/
            /*车辆信息页*/
            form.on('submit(vehicle-apply)', function (data) {
                if (checkGuest()) {
                    return false;
                }
                data.field.id = vehicleId;
                $.ajax({
                    url: 'vehicles',
                    method: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg("修改成功");
                            loadVehicleInfo();
                        } else {
                            layer.alert(result.msg, {
                                skin: 'layui-layer-molv'
                            });
                        }
                    }
                });
                return false;
            });

            form.on('submit(vehicle-info-refresh)', function (data) {
                loadVehicleInfo();
                layer.msg("车辆信息已刷新");
                return false;
            });

            /**
             * 添加按钮
             */
            $("#vehicle-use-add-btn").on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                showVehicleUseForm();
            });

            $("#vehicle-refuel-add-btn").on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                showVehicleRelationForm();
            });

            $("#vehicle-repair-add-btn").on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                showIotVehicleForm();
            });

            table.on('tool(vehicle-file-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该记录吗？', function (index) {
                        $.ajax({
                            url: '/vehicle-files/' + data.id,
                            type: 'DELETE',
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('vehicle-file-table');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'download') {
                    window.open("/vehicle-files/download/" + data.uuid);
                }
            });

            /**
             * 清空按钮
             */
            $('#vehicle-use-clear-btn').on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                layer.confirm('真的清空该车辆的附件信息吗？', {
                    skin: 'layui-layer-molv'
                }, function (index) {
                    $.ajax({
                        url: 'vehicle-uses',
                        data: { vehicleId },
                        method: "DELETE",
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('清空成功');
                                table.reload('vehicle-use-table');
                            } else {
                                layer.alert(result.msg, {
                                    skin: 'layui-layer-molv'
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            });

            $('#vehicle-refuel-clear-btn').on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                layer.confirm('真的清空该车辆的关联车辆吗？', {
                    skin: 'layui-layer-molv'
                }, function (index) {
                    $.ajax({
                        url: 'vehicle-refuels',
                        data: { vehicleId },
                        method: "DELETE",
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('清空成功');
                                table.reload('vehicle-refuel-table');
                            } else {
                                layer.alert(result.msg, {
                                    skin: 'layui-layer-molv'
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            });

            $('#vehicle-repair-clear-btn').on('click', function () {
                if (checkGuest()) {
                    return false;
                }
                layer.confirm('真的清空该车辆的相关物联车辆吗？', {
                    skin: 'layui-layer-molv'
                }, function (index) {
                    $.ajax({
                        url: 'vehicle-repairs',
                        data: { vehicleId },
                        method: "DELETE",
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('清空成功');
                                table.reload('vehicle-repair-table');
                            } else {
                                layer.alert(result.msg, {
                                    skin: 'layui-layer-molv'
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            });

            /**
             * 刷新按钮
             */
            $('#vehicle-info-refresh').on('click', function () {
                loadVehicleInfo();
            });

            $('#vehicle-use-refresh-btn').on('click', function () {
                table.reload('vehicle-use-table', {
                    where: {
                        vehicleId: vehicleId
                    }
                });
            });

            $('#vehicle-refuel-refresh-btn').on('click', function () {
                table.reload('vehicle-refuel-table', {
                    where: {
                        vehicleId: vehicleId
                    }
                });
            });

            $('#vehicle-repair-refresh-btn').on('click', function () {
                table.reload('vehicle-repair-table', {
                    where: {
                        vehicleId: vehicleId
                    }
                });
            });

            $('#replace-refresh-btn').on('click', function () {
                table.reload('replace-table', {
                    where: {
                        vehicleId: vehicleId
                    }
                });
            });

            $('#repair-refresh-btn').on('click', function () {
                table.reload('repair-table', {
                    where: {
                        vehicleId: vehicleId
                    }
                });
            });

            $('#fault-refresh-btn').on('click', function () {
                table.reload('fault-table', {
                    where: {
                        vehicleId: vehicleId
                    }
                });
            });

        });
    </script>
</body>

</html>